@charset "UTF-8";

/*******************统一样式*******************/
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
    padding-left: 0;
}
a{
    text-decoration: none;
    color: #555;
}
a:hover{
    color:#07528C;
}
body {
    font-size: 13px;
    line-height: 1.8;
    color: #555;
    background: #fff;
    font-family: 微软雅黑;
    overflow-x: hidden;
}

/***************header*******************/
.head_top .wrap{
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}
/*********************head_top   start***********************/
.head_top{
    background-color: #E8E8E8;
    height: 32px;
    position: relative;
    line-height: 32px;
    z-index: 10;
}

.head_top .left{
    float: left;
}/*设置欢迎语*/

.head_top .right{
    float: right;
}


.head_top .right li {
    float: right;/*使子公司、微博那些li标签也浮动起来，变成一行*/
    padding: 0 10px;
}

.head_top .right li a{
    display: block;/*这里为什么设置以块状显示？？？？？？*/
    font-size: 12px;
}

.head_top .right li.li1,
.head_top .right li.li2,
.head_top .right li.li3{/*设置的是子公司那些地方的li标签 */
    position: relative;
    cursor: pointer;/*使鼠标移过去会显示小手形状*/
    z-index: 12;
}

/***********子公司 下拉************/
.head_top .right .li1 .sub_ul{
    background: #fff;
    height: 0px;/*这个位置height=0表示一开始下拉列表额高度为0，即默认不会显示出列表*/
    width: 180px;
    overflow: hidden;
    position: absolute;/**/
    right: 0px;

    /*****下拉动画效果****/
    transition: height 1s;

    /*****控制优先级*****/
    z-index: 999;
}

/*采购平台+网上办公  菜单下拉*/
.head_top .right .li2 .sub_ul,
.head_top .right .li3 .sub_ul{
    background: #fff;
    height: 0px;/*这个位置height=0表示一开始下拉列表额高度为0，即默认不会显示出列表*/
    width: 180px;
    overflow: hidden;
    position: absolute;/**/
    right: 0px;

    /*****下拉动画效果****/
    transition: height 1s;

    /*****控制优先级*****/
    z-index: 999;
}

.head_top .right li.li1 .sub_ul .sub_uls{
    width: 200px;
    height: 100px;
    float: left;
    text-align: center;
}

.head_top .right li.li2 .sub_ul .sub_uls,
.head_top .right li.li3 .sub_ul .sub_uls{
    width: 100px;
    height: 100px;
    float: left;
    text-align: center;
    position: absolute;
    right: 0;
}

.head_top .right li.li1 .sub_ul .sub_uls li,
.head_top .right li.li2 .sub_ul .sub_uls li,
.head_top .right li.li3 .sub_ul .sub_uls li{
    display: block;
    width: 100%;
    height: 30px;
}

.head_top .right li.li1 .sub_ul .sub_uls li a,
.head_top .right li.li2 .sub_ul .sub_uls li a,
.head_top .right li.li3 .sub_ul .sub_uls li a{
    text-align: center;
    display: block;
    height: 35px;
    line-height: 35px;
    width: 100%;
}

.head_top .right li.li1 .sub_ul .sub_uls li a:hover,
.head_top .right li.li2 .sub_ul .sub_uls li a:hover,
.head_top .right li.li3 .sub_ul .sub_uls li a:hover{
    background: #ddd;
}

.head_top .right li.li1:hover .sub_ul{/*鼠标放到子公司处 会显示子列表 即下拉菜单*/
    border: 1px solid #ddd;
    border-bottom: 3px solid red;/*下边框是红色*/
    background: #fff;
    height: 125px;/*这里设置高度 即鼠标移上去会有子列表显示*/
    width: 180px;
    /*********下拉动画效果*********/
    transition: height 1s;
}/*鼠标放到子公司处 会显示子列表 即下拉菜单*/

.head_top .right li.li2:hover .sub_ul, /*鼠标放到采购平台、网上办公处 会显示子列表 即下拉菜单【这里与子公司那个分开写是因为，下拉的高度不一样】*/
.head_top .right li.li3:hover .sub_ul {
    /*鼠标放到采购平台、网上办公处 会显示子列表 即下拉菜单【这里与子公司那个分开写是因为，下拉的高度不一样】*/
    border: 1px solid #ddd;
    border-bottom: 3px solid red;
    background: #fff;
    height: 65px;
    width: 100px;
    /*********下拉动画效果*********/
    transition: height 1s;

    margin-left: -20px;
}

/************************************header_top  end***********************************************/


/***********************************header_bottom  start*******************************************/
.head_bottom{
    /*限制最小宽度*/
    min-width: 1031px;
}

.head_bottom .wrap{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.head_bottom .left a{/*设置导航栏左边的的时风图标*/
    display: block;
    width: 220px;
    height: 88px;
    background: url("../img/sf_logo.png") no-repeat;
    float: left;
}/*设置导航栏左边的的时风图标*/

.head_bottom .right{/*设置【拖拉机上面、欢迎语下面】那块位置的【高度】*/
    float: right;
    height: 88px;
}
/*.head_bottom .left{
    float: left;
    height: 88px;
}*/
.head_bottom .head_language{/*设置【中/EN】处的宽度*/
    width: 60px;
/*    background-color: red;*/
}/*设置【中/EN】处的宽度*/

.head_bottom .head_language .title{/*设置a标签处【中/EN】的位置 大小 及里面的字体*/
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    line-height: 88px;
    margin-left: 5px;
    
    /***设置字体***/
    font-weight: bold;
    font-size: 16px;
}/*设置a标签处【中/EN】的位置 大小 及里面的字体*/

/*******************❤❤❤❤【设置《中/EN》下拉框】❤❤❤❤********************/
.china{/*设置【中/EN】处的下拉框*/
    width: 150px;
    height: 0px;
    background-color: rgba(0,0,0,0.5);
    position: relative;
    /*top: 30px;*/
    left: -90px;/*❤❤【这里是保证鼠标移走时 下拉框与title【中/EN】右边对齐】*/
    /*【div内容隐藏 即：中文简体和EN】*/
    overflow: hidden;
    transition: height 1s;
}

.head_language .china a{
    display: inline-block;
    text-align: center;
    color: #fff;
    width: 60px;/*中文简体和EN在下拉框中的宽度*/
    /*height: 30px;*/
    line-height: 50px;
    margin-left: 13px;
}

.head_bottom .head_language:hover .china{
    background-color: rgba(0,0,0,0.5);
    width: 150px;
    height: 50px;
    position: relative;
    left: -90px;/*❤❤保证鼠标移过去 时 下拉框与【中/EN】的右边对齐*/
    transition: height 1s;
}

.head_bottom .head_language .china a:hover{
    color: red;
}

/*******************❤❤❤❤【设置下拉框】❤❤❤❤【ending】********************/


/*******************❤❤❤❤【设置<放大镜下的>下拉框】❤❤❤❤******************/

.head_bottom .head_search{
    width: 50px;
    border-left: 1px solid #ddd;
/*    background-color: yellow;*/
}/*【设放大镜 search 外边框div】*/

.head_bottom .head_search a{
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    /*设置居中*/
    margin-top: 50%;
    /*图片截取*/
    background:url("../img/ico.png") no-repeat ;
    background-position: 5px 10px;
}/*【截取放大镜图片及位置设置】*/

.text{/*设置【放大镜】处的下拉框*/
    width: 200px;
    height: 0px;
    background-color: rgba(0,0,0,0.5);
    position: relative;
    /*top: 30px;*/
    left: -95px;/*❤❤【这里是保证鼠标移走时 下拉框与title【中/EN】右边对齐】*/
    top: 32px;

    /*【div内容隐藏 即：隐藏input文本框】*/
    overflow: hidden;
    transition: height 1s;
}/*设置【放大镜】处的下拉框*/

.head_bottom .head_search:hover .text{
    background-color: rgba(0,0,0,0.5);
    width: 200px;
    height: 50px;
    position: relative;
    left: -95px;/*❤❤保证鼠标移过去 时 下拉框与【中/EN】的右边对齐*/
    top: 32px;
    transition: height 1s;
}/*显示【放大镜下拉框】*/

.head_bottom .head_search .text input{/*设置input 文本框*/
    height: 42px;
    width: 182px;
    border: 4px solid #4C4A4F;
    padding-left: 10px;
}/*设置input 文本框*/

/*******************❤❤❤❤【设置下拉框】❤❤❤❤【ending】********************/


.head_bottom .nav ul li {
    float: right;
    width: 100px;/*设置li边框的宽度*/
    height: 88px;
    line-height: 88px;
 /*   border:1px solid saddlebrown;*/
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.head_bottom .nav ul li .ones{/*使nav中整个方格以块状显示*/
    display: block;
   /* float: right;*/
}
.head_bottom .nav ul li .first{/*使首页一直显示红色*/
    background: #ff0000;
    color: #fff;
    display: block;
}

.head_bottom .nav ul li .six:hover .one,
.head_bottom .nav ul li .five:hover .one,
.head_bottom .nav ul li .four:hover .one,
.head_bottom .nav ul li .three:hover .one,
.head_bottom .nav ul li .two:hover .one,
.head_bottom .nav ul li .ones:hover .one{/*使鼠标放到方格上会显示红色背景 白色字体*/
    background-color: #FF0000;
    color: #ffffff;

 /*   transition: 1s;*/
}


/***********************************❤【联系时风下拉框】❤*************************************/

.big,/*设置【联系时风下的下拉框 的总div】*/
.big2,
.big3{
    width: 400px;
    height: 0px;/*使得边框不显示*/
    float: left;
    background-color: #FBFBFB;
    position: relative;
    left: -298px;

    overflow: hidden;/*使得边框不显示的同时边框内的文字不显示*/
    transition: height 1s;
}

.big2 .sub2,/*设置【联系我们、在线留言】的边框div*/
.big .sub{
    width: 150px;
    height: 200px;
 /*   background-color: yellow;*/
    float: left;
}

.big2 .sub2 a,/*设置【联系我们、在线留言】的p标签的位置*/
.big .sub a{
    width: 85px;
    height: 60px;
    padding-left: 4px;
    display: block;
    border-bottom: 1px solid #E8E8E8;
    margin-left: 2px;
    margin-top: -20px;
    font-size: 14px;

}

.big2 .img,/*设置【客服图片的边框】*/
.big .img {
    width: 250px;
    height: 150px;
    float: left;
/*    background-color: green;*/
}

.big2 .img img,/*设置【客服图片】*/
.big .img img{
    width: 250px;
    height: 150px;
}

.big2 .p,/*设置【客服图片下的字体的外边框】*/
.big .p{
    float: left;
    width: 250px;
    height: 50px;
/*    background-color: deeppink;*/
}

.big2 .p p,/*设置【客服那个下拉框中 路路畅通的字体位置及大小颜色】*/
.big .p p{
    line-height: 50px;
    font-size: 20px;
    color: #B7A4A4;
   margin-left: -83px;
}

.head_bottom .nav .two a,/*为的是使整个【联系时风、人才招聘以块状显示，使鼠标移上去整块变红色而不是只有字体周围】*/
.head_bottom .nav .ones a{
    display: block;
}

.head_bottom .nav .two:hover .big2,/*设置鼠标移上去显示【客服下拉框】*/
.head_bottom .nav .ones:hover .big {
    width: 400px;
    height: 200px;
    float: left;
    position: relative;
    left: -298px;

    overflow: hidden; /*使得边框不显示的同时边框内的文字不显示*/
    transition: height 1s;
}
/***********************************❤【联系时风下拉框】结束❤*************************************/


/***********************************❤【销售服务下拉框】❤****************************************/

.big3,.big4,.big5,.big6{
    width: 400px;
    height:0px;/*使得边框不显示*/
    float: left;
    background-color: #FBFBFB;
    position: relative;
    left:0px;

    overflow: hidden;/*使得边框不显示的同时边框内的文字不显示*/
    transition: height 1s;
}

.big3 .sub3,/*设置【服务优势、服务承诺等的边框】的边框div*/
.big4 .sub4,
.big5 .sub5,
.big6 .sub6{/*设置【服务优势、服务承诺等的边框】的边框div*/
    width: 150px;
    height: 200px;
   /* background-color: yellow;*/
    float: left;
}

.big3 .sub3 a,/*设置【服务优势、服务承诺等的边框】的a标签的位置*/
.big4 .sub4 a,
.big5 .sub5 a,
.big6 .sub6 a{/*设置【服务优势、服务承诺等的边框】的a标签的位置*/
    width: 90px;
    height: 55px;
    padding-left: 4px;
    display: block;
    border-bottom: 1px solid #E8E8E8;
    margin-left: 2px;
    margin-top: -20px;
    font-size: 14px;
}

.big3 .img,/*设置【图片的边框】*/
.big4 .img,
.big5 .img,
.big6 .img {/*设置【客服图片的边框】*/
    width: 250px;
    height: 150px;
    float: left;
    /*    background-color: green;*/
}


.big3 .img img,/*设置【图片】*/
.big4 .img img,
.big5 .img img,
.big6 .img img {/*设置【客服图片】*/
    width: 250px;
    height: 150px;
}

.big3 .p,/*设置【销售服务下的字体的外边框】*/
.big4 .p,
.big5 .p,
.big6 .p{/*设置【销售服务下的字体的外边框】*/
    float: left;
    width: 250px;
    height: 50px;
  /*  background-color: deeppink;*/
    left: 50px;
}

.big3 .p p,/*设置【那个下拉框中 路路畅通的字体位置及大小颜色】*/
.big4 .p p,
.big5 .p p,
.big6 .p p {/*设置【客服那个下拉框中 路路畅通的字体位置及大小颜色】*/
    line-height: 50px;
    font-size: 20px;
    color: #B7A4A4;
    margin-left: -83px;
}

.head_bottom .nav .three a,
.head_bottom .nav .four a,
.head_bottom .nav .five a,
.head_bottom .nav .six a
{
    display: block;
}

.head_bottom .nav .three:hover .big3,/*设置鼠标移上去显示【下拉框】*/
.head_bottom .nav .four:hover .big4,
.head_bottom .nav .five:hover .big5,
.head_bottom .nav .six:hover .big6{/*设置鼠标移上去显示【客服下拉框】*/
    width: 400px;
    height: 200px;
    float: left;
    position: relative;
    left: 0px;

    overflow: hidden; /*使得边框不显示的同时边框内的文字不显示*/
    transition: height 1s;
}

.head_bottom .nav  .sub a:hover,/*使得 鼠标放到下拉框里面的 a标签的文字上时  文字变红色*/
.head_bottom .nav .big2 .sub2 a:hover,
.head_bottom .nav .big3 .sub3 a:hover,
.head_bottom .nav .big4 .sub4 a:hover,
.head_bottom .nav .big5 .sub5 a:hover,
.head_bottom .nav .big6 .sub6 a:hover{
  color: red;
}



/************************************head_bottom  end***************************************/

/*************************main**************************/

/**********************************************时风简介部分 开始************************************************/
.body_img {/*设置【拖拉机图片】部分的外边框div*/
    width: 100%;
    height: 500px;
    /*float: left;*/
}/*设置【拖拉机图片】部分的外边框div*/

.body_img img{/*设置【拖拉机图片】*/
    width: 100%;
    height: 500px;
    overflow: hidden;
    /*float: left;*/
}/*设置【拖拉机图片】*/

.changtong {/*设置【拖拉机左下角的‘时风时风 路路畅通’那一块的大的外边框div【其中包含路路畅通字体和左、右箭头三个div】】*/
    width:500px;
    height: 140px;
    background-color:rgba(23,74,113,0.5);
    position: relative;
    top: -146px;
    left: 76px;
   /* opacity: 0.5;*//*【设置透明度】*/
}/*设置【拖拉机左下角的‘时风时风 路路畅通’那一块的大的外边框div【其中包含路路畅通字体和左、右箭头三个div】】*/

.changtong p.one{/*设置【时风时风 路路畅通字体】*/
    color: white;
    font-weight: bold;
    font-size: 35px;
    padding-left:40px;
   /* display: block;
    float: left;*/
}/*设置【时风时风 路路畅通字体】*/

.changtong p.two{/*设置【路路畅通下的英文字体s】*/
    color: white;
    font-weight: bold;
    font-size: 20px;
    padding-left:40px;
    display: block;
    float: left;
}/*设置【路路畅通下的英文字体s】*/

.changtong .jt_left a{/*设置【路路畅通 左边的箭头】*/

    background: url("../img/b_btn.png") no-repeat;
    background-position: 0px 0px;/*x轴y轴均为0*/
    width: 21px;
    height: 36px;
    display: block;
    float: left;
    margin-left: 10px;
    margin-right: 7px;
}/*设置【路路畅通 左边的箭头】*/

.changtong .jt_left a:hover{/*【左箭头变红色】*/
    background-position: -20px 0px;
}/*【左箭头变红色】*/

.changtong .jt_right a{/*设置【路路畅通 右边的箭头】*/
    background: url("../img/b_btn.png") no-repeat;
    background-position: 0px -35px;/*x轴y轴均为0*/
    width: 21px;
    height: 36px;
    display: block;
    float: left;
    margin-left: 10px;
}/*设置【路路畅通 右边的箭头】*/

.changtong .jt_right a:hover{/*【右箭头变红色】*/
    background-position: -20px -35px;/*【截取图片】*/
}/*【右箭头变红色】*/

.body .body_font{/*设置【拖拉机下面的大div 浮动】*/
    float: left;
}/*设置【拖拉机下面的大div 浮动】*/

.body .body_font .wrap{/*设置一个wrap 的div 并且居中*/
    width: 1250px;
    margin-left: 76px;
    margin-right: auto;
    background-color: #F4F4F4;
    height: 400px;
    margin-top: -110px;
    float: left;
}/*设置【在拖拉机下面的大边框内】一个wrap 的div 并且居中*/

.body_left{/*设置【时间简介部分】的一个div边框*/
    width: 420px;
    height: 360px;
    /*border: 1px solid black;*/
    float: left;
}/*设置【时间简介部分】的一个div边框*/

.body_left_top a{/*设置【时风简介】部分*/
    display: block;/*若不设置以块状显示，则下一行的时风集团那些就会紧跟其后*/
    font-size: 50px;
    margin-left: 40px;
}/*设置【时风简介】部分*/

.body_left_top span{/*设置span标签内【时风集团成立于··】这部分*/
    margin-left: 40px;
}/*设置span标签内【时风集团成立于··】这部分*/

.body_left_bottom table {/*设置表格内的 即5000和200 那个整体右移*/
    margin-left: 40px;
}/*设置表格内的 即5000和200 那个整体右移*/

.body_left_bottom table .mianji{/*设置5000和总占地面积的右边框以及距离边框的位置*/
    border-right: 1px solid #DBDBDB;
    padding-right:20px;
}/*设置5000和总占地面积的右边框以及距离边框的位置*/

.body_left_bottom table .zichan{/*设置200和资产距离灰色竖线的位置*/
    padding-left: 20px;
}/*设置200和资产距离灰色竖线的位置*/

.body_left_bottom table span{/*设置5000和200数字的大小及颜色*/
    font-size: 60px;
    color: #07528C;
}/*设置5000和200数字的大小及颜色*/

/******************************************时风简介部分 结束**************************************************/


.body_right{/*设置【时风简介右边部分的div】包括：训话和楼房上下两部分*/
    float: left;
    height: 374px;
    width: 715px;
    float: left;
    /*background-color: pink;*/
}/*设置【时风简介右边部分的div】包括：训话和楼房上下两部分*/

.body_right .body_right_top{/*设置【训话+右边文字的总的外边框 div】*/
    width: 715px;
    height: 187px;
    /*border: 1px solid purple;*/
}/*设置【训话+右边文字的总的外边框 div】*/

.body_right .body_right_top:hover .wenhualinian{/*设置【鼠标放到训话图片或者是训话右边文字时背景色会变】*/
    background: #07528C;
}/*设置【鼠标放到训话图片时背景色会变会变】*/

.body_right_top .wenhualinian{/*设置【训话右边部分的背景颜色——红色】*/
    width: 550px;
    height: 187px;
    background-color: #FF0000;
    margin-left: 230px;
}/*设置【训话右边部分的背景颜色——红色】*/

.body_right_top .wenhualinian:hover{/*设置【鼠标放到训话右边文字】时背景色会变*/
    background-color: #07528C;
}/*设置【鼠标放到训话右边文字】时背景色会变*/

.body_right .body_right_top img{/*设置【训话】那个图片的大小*/
    width: 230px;
    height: 187px;
    float: left;
}/*设置【训话】那个图片的大小*/

.body_right .body_right_top span a{/*设置【span 文化理念的字体颜色及字体大小】*/
    color: white;
    font-size: 30px;
    padding-left: 50px;
    font-weight: bold;
    display: block;
}/*设置【span 文化理念的字体颜色及字体大小】*/

.body_right .body_right_top .guanggao{/*设置【广告语】的边框*/
    width: 430px;
    height: 90px;
 /*   border: 1px solid red;*/
    float: left;
    margin-top: 1px;
}/*设置【广告语】的边框*/

.body_right .body_right_top .guanggao p a{/*设置广告语部分的颜色和边距及大小*/
    color:white;
    padding-left: 52px;
    font-size: 15px;
    display: block;
}/*设置广告语部分的颜色和边距及大小*/

.body_right .body_right_bottom img{/*设置【楼房】那个图片的大小*/
    width: 230px;
    height: 187px;
    float: left;
}/*设置【楼房】那个图片的大小*/

.guihua{/*设置【规划和战略目标总的背景区域为】*/
    width: 550px;
    height: 187px;
    background-color: #F4F4F4;
    margin-left: 230px;
    display:block ;
}/*设置【规划和战略目标总的背景区域为】*/

/*设置【鼠标移到【规划那个总的div上，即.body_right_bottom，来控制右边字体颜色及背景的变化】那部分区域，会显示背景色及字体颜色变化。】*/
.body_right .body_right_bottom:hover .guihua,/*控制背景颜色变化*/
.body_right .body_right_bottom:hover .guihua a{/*控制字体颜色变化*/
    background-color: #07528C;/*【hover】*/
    color:white;
}

.body_right .body_right_bottom span a{/*设置【战略规划】字体大小及颜色等*/
    color: #505050;
    font-size: 30px;
    padding-left: 50px;
    font-weight: bold;
    display: block;
}/*设置【战略规划】字体大小及颜色等*/

.body_right .body_right_bottom .mubiao{/*设置【目标】部分的边框*/
    width: 430px;
    height: 90px;
    /*   border: 1px solid red;*/
    float: left;
}/*设置【目标】部分的边框*/

.body_right .body_right_bottom p a{/*设置【目标】那里的文字颜色及大小等*/
    color:#505050;
    padding-left: 52px;
    font-size: 15px;
    display: block;
}/*设置【目标】那里的文字颜色及大小等*/

.body .media{/*新闻媒体部分*/
    width: 100%;
    height: 80px;
 /*   background-color: yellow;*/
    float: left;
}/*新闻媒体部分*/

.body .media .wrap {
    /*限制【新闻媒体】部分在中间显示  设置一个最大边框*/
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    height: 80px;
  /*  background-color: black;*/
}/*限制【新闻媒体】部分在中间显示  设置一个最大边框*/

.body .media .media_font{/*设置【新闻媒体】的一个小div*/
    width: 200px;
    height: 55px;
   /* background-color: chartreuse;*/
    float: left;
    margin-top: 15px;
}/*设置【新闻媒体】的一个小div*/

.body .media .media_font a{/*设置的是【新闻媒体的大小及位置】*/
    font-size: 39px;
    line-height: 55px;
    padding-left: 3px;
    color: #505050;
}/*设置的是【新闻媒体的大小及位置】*/

.body .media .more{/*设置的是【+更多】部分的边框div*/
    width: 60px;
    height: 55px;
    float: right;
   /* background-color: aqua;*/
    margin-top: 15px;
}/*设置的是【+更多】部分的边框div*/

.body .media .more a{/*设置的是【新闻部分】的【+更多】部分的字体及位置等*/
    font-size:15px;
    line-height: 55px;
    padding-left: 6px;
    color: #5C778C;
}/*设置的是【新闻部分】的【+更多】部分的字体及位置等*/

.body .chanpin{/*设置【新闻媒体下的产品部分】 给一个大的div*/
    width: 100%;
    height: 620px;
    float: left;
   /* background-color: darksalmon;*/
   /* border: 1px solid blue;*/
}/*设置【新闻媒体下的产品部分】 给一个大的div*/

.chanpin .wrap{/*设置【新闻媒体下的产品部分】 在大的div内部设置一个wrap*/
    width: 1200px;
    height: 580px;
   /* background-color: coral;*/
    /*border: 1px solid mediumpurple;*/
    margin-left: auto;
    margin-right: auto;
}/*设置【新闻媒体下的产品部分】 在大的div内部设置一个wrap*/

.body .chanpin .chanpin_top .shifeng{/*设置【时风产品】这四个字的边框 、字体大小、位置等*/
    width: 200px;
    height: 70px;
    /*background-color: red;*/
    display: block;
    float: left;
    font-size: 39px;
    color: #505050;
    line-height: 55px;
}/*设置【时风产品】这四个字的边框 、字体大小、位置等*/

.body .chanpin .chanpin_top .jieshao{/*【介绍】部分的边框以及字体的设置*/
    width: 490px;
    height: 60px;
    /*background-color: chartreuse;*/
    margin-left: 50px;
    font-size: 14px;
    display: block;
    float: left;
    padding-top: 10px;
}/*【介绍】部分的边框以及字体的设置*/

.body .chanpin .chanpin_top .more{/*设置【时代产品】 部分的【more】*/
    width: 55px;
    height: 70px;
    /*background-color: burlywood;*/
    /*border: 1px solid black;*/
    font-size: 15px;
    display: block;
    float: right;
    line-height: 70px;
    padding-left: 6px;
    color: #5C778C;
}/*设置【时代产品】 部分的【more】*/

.body .chanpin .chanpin_bottom{/*产品图片部分整的外框【在时代产品那些字下面的区域，但是与产品这几个字同属于wrap】*/
    width: 1200px;
    height: 430px;
    /*background-color: orange;*/
    /*border: 1px solid orange;*/
    float: left;
}/*产品图片部分整的外框【在时代产品那些字下面的区域，但是与产品这几个字同属于wrap】*/

.body .chanpin .chanpin_bottom .sanlunche,/*边框设置【产品 中的三个图片部分 的外边框】*/
.body .chanpin .chanpin_bottom .fadongji,
.body .chanpin .chanpin_bottom .shougeji{
    width: 330px;
    height: 330px;
  /*  background-color: yellow;*/
    margin:50px 35px ;
    float: left;
    margin-left: 20px;
    overflow: hidden;/*隐藏滚动条*/
}

.body .chanpin .chanpin_bottom .sanlunche img,/*设置【产品中的三个图片的大小】*/
.body .chanpin .chanpin_bottom .fadongji img,
.body .chanpin .chanpin_bottom .shougeji img{
    width: 330px;
    height: 330px;
   /* z-index: 20;*/
    transition: 1s ease/*【ease控制速度】*/ all;/*【❤❤图片过渡！❤❤使得变化不那么僵硬】ease all 全部向外放大*/

}/*设置【产品中的三个图片的大小】*/

.body .chanpin .chanpin_bottom .sanlunche img:hover,/*设置【鼠标移到图片上】【产品中的三个图片有【大小】的变化】*/
.body .chanpin .chanpin_bottom .fadongji img:hover,
.body .chanpin .chanpin_bottom .shougeji img:hover
{   transform:scale(1.2);/*图片压缩或放大*/
    /*background-color: #CD1A03;*/
}

.body .chanpin .chanpin_bottom .sanlunche:hover a.font,/*使得鼠标放到轮播图片上【底下的文字“三轮汽车”等字体背景变红】*/
.body .chanpin .chanpin_bottom .fadongji:hover a.font,
.body .chanpin .chanpin_bottom .shougeji:hover a.font{
    background-color: red;

}

.body .chanpin .chanpin_bottom .sanlunche .font,/*设置【产品中的三个图片内】的【文字大小及背景等】*/
.body .chanpin .chanpin_bottom .fadongji .font,
.body .chanpin .chanpin_bottom .shougeji .font{
    width: 330px;
    height: 60px;
    line-height: 60px;
    font-size: 35px;
    background-color: #606181;
    color: white;
    display: block;
    float: left;
    margin-top: -40px;
    position: relative;
    top: -20px;
}

.body .chanpin .chanpin_bottom .sanlunche .font:hover,/*设置【鼠标移到文字上】【产品中的三个图片内】的【文字背景变化】*/
.body .chanpin .chanpin_bottom .fadongji .font:hover,
.body .chanpin .chanpin_bottom .shougeji .font:hover{

    background-color: #CD1A03;
}

/**********************main end************************/

.foot{
    width: 100%;
    height: 300px;
    background-color: #0C3D77;
    float: left;;
}/*foot 大的外边框*/

.foot .wrap_top{/*设置footer的一个【wrap】*/
    width: 1200px;
    height: 300px;
 /*   background-color: pink;*/
    margin-left: auto;
    margin-right:auto;
}/*设置footer的一个【wrap】*/

.foot .foot_left{/*设置foot 左边的div  包括时风logo和走进时风简介等*/
    width: 260px;
    height: 300px;
   /* background-color: burlywood;*/
    float: left;
}/*设置foot 左边的div  包括时风logo和走进时风简介等*/

.foot .foot_left .foot_logo img{/*设置底部的logo图片*/
    float: left;
    margin-left: 30px;
}/*设置底部的logo图片*/

.foot .foot_left .foot_logo .zoujinshifeng{/*【走进时风】*/
    color: white;
    font-size: 25px ;
    margin-left: 30px;
    padding-bottom: 30px;
}/*【走进时风】*/

.foot .foot_left .foot_left_font{/*设置logo下面的文字*/
    float: left;/*设置logo下面的文字浮动，保证与logo在一行*/
  /*  border: 1px solid  black;*/
    height: 200px;
    width: 100px;
    /*height: 300px;*/
    margin-left: 26px;
    overflow:scroll;/*让滚动条显示*/
    overflow-x: hidden;
}

.foot .foot_left .foot_left_font li{/*设置foot_left部分的li【走进时风，文化简介，在左下角】*/
    color: #A2D3E4;
    margin-left: 10px;
    line-height: 20px;
    margin-top: 16px;
    margin-bottom: 0px;
}/*设置foot_left部分的li【走进时风，文化简介，在左下角】*/

/***************************【设置❤❤滚动条】*********************************/
.foot .foot_left .foot_left_font::-webkit-scrollbar{/*设置滚动条宽度*/
    width: 5px;
}
.foot .foot_left .foot_left_font::-webkit-scrollbar-track{/*设置滚动条内轨道的颜色*/
    background-color: red;
}
.foot .foot_left .foot_left_font::-webkit-scrollbar-thumb{
    background-color:yellow ;
}

/****************************【❤❤滚动条设置结束！！】****************************/



.foot .foot_left .foot_left_font li a{/*设置foot_left部分的li下的a标签字体*/
    color: #A2D3E4;
}/*设置foot_left部分的li下的a标签字体*/

.foot .foot_left .foot_left_font li a:hover{/*设置foot_left部分的li下的a标签字体*/
    color: white;
}/*设置foot_left部分的li下的a标签字体*/

.foot_main,/*设置foot_main和 foot_right的边框*/
.foot_right{
/*    background-color: burlywood;*/
    width: 280px;
    height: 300px;
    float: left;
    margin-left: 10px;
    border-left: 2px solid #617184;
}

.foot .foot_main img,/*设置底部的car和phone图片*/
.foot .foot_right img{
    float: left;
    margin-left: 30px;
}

.foot .foot_main .shifengchanpin,/*【时风产品】四个字的设置*/
.foot .foot_right .lianxiwomen {
    color: white;
    font-size: 25px ;
    margin-left: 30px;
    padding-bottom: 30px;

}

.foot .foot_main .foot_main_font table{/*设置foot_main_font部分*/
    margin-left: 90px;
    margin-top:16px;
    padding-left: 20px;
    color: #AFD3FE;
}/*设置foot_main_font部分*/

.foot .foot_main .foot_main_font table td{/*设置td的宽度*/
    width: 80px;
}/*设置td的宽度*/

.foot_main_font a .hang td:hover{
    color: white;
}

.foot .foot_right .foot_right_font p{/*设置集团那个地方的位置等*/
    margin-left: 90px;
    margin-top:16px;
    padding-left: 10px;
}
.foot .foot_right .foot_right_font p a{/*设置集团那个地方的字体信息等*/
     color: #AFD3FE;
 }
.foot .foot_right .foot_right_font p a:hover{/*设置集团那个地方的字体信息等*/
    color:white;
}
.foot .foot_right .foot_right_font p .num{/*设置集团那个地方的位置等*/
     font-size: 18px;
    color: #AFD3FE;
}

/************************二维码*********************/

.foot .photo .weibo{/*【设置 放：第一个二维码 的区域】*/
    width: 130px;
    height: 130px;
  /*  background-color: yellow;*/
    float: left;
    margin-top: 60px;
    margin-left: 20px;
}
.foot .photo .shouji{/*设置放第二个二维码的 区域*/
    width: 130px;
    height: 130px;
    /*background-color: red;*/
    float: left;
    margin-top:-130px;
    margin-left: 180px;
}
.foot .photo .weibo p,
.foot .photo .shouji p{/*设置【官方微博】和【手机站】这几个字的颜色*/
    color: white;
}
.foot .photo .final{/*设置【二维码下方的外边框 即： 红色区域】*/
    width: 285px;
    height: 40px;
    background-color: red;
    float: right;
    margin-top: 70px;
    margin-right: 1px;
}
.foot .photo .final_left a{/*设置【二维码下方的 红色区域内的【成员公司】这几个字】*/
    width: 90px;
    height: 40px;
  /*  background-color: red;*/
    line-height: 40px;
    text-align: center;
    font-size: 17px;
    color: white;
    padding-left: 5px;
    float: left;
}
.foot .photo .final_right a{/*设置【二维码下方的 红色区域内的【+】这个字】*/
    color: white;
    float: right;
    font-size: 27px;
    line-height: 40px;

}



.wrap_bottom{
    width: 1200px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    /*background-color: red;*/
}
.wrap_bottom .left{/*设置【QQ】等图标的外边框*/
    width: 300px;
    height:100px;
   /* background-color: yellow;*/
    float: left;
}
.wrap_bottom .left p{/*设置【分享】两个字*/
    display:block;
    float: left;
    padding-top: 25px;
    padding-right: 20px;
    padding-left: 35px;
}
.wrap_bottom .left img{/*设置【QQ】等图标位置*/
    padding-top: 25px;
    padding-left: 15px;
}

.wrap_bottom .main{/*设置【有限公司】部分的边框div*/
    width: 400px;
    height: 100px;
   /* background-color: deeppink;*/
    float: left;
    margin-left: 50px;
}
.wrap_bottom .main .p1{/*设置【有限公司】部分的内容*/
    padding-top: 20px;
}
.wrap_bottom .main p{
    padding-left: 30px;
}
.wrap_bottom .main span{
    font-weight: bold;
}
.wrap_bottom .right{/*设置最右下角【法律声明那部分的内容】*/
    width: 285px;
    height: 60px;
    background-color:#D5D5D5;
    float: left;
    margin-left: 164px;
}
.wrap_bottom .right a{
    padding-left: 5px;
    padding-right: 10px;
    line-height: 60px;
    border-right: 1px solid #B6AEB6;
    color: black;
}
.wrap_bottom .right a:hover{
    text-decoration: underline;
    color: black;
}

/*******************************************【❤❤侧边导航】*************************************************/
.daohang{/*设置最右侧那个侧边栏*/
    width: 72px;
    height: 260px;
/*    background-color: red;*/
    float: left;
    position: fixed;
    right: 0px;
    bottom: 85px;

}
.daohang .top a{/*设置侧边导航的最上面那个框*/
    width: 72px;
    height: 72px;
    display: block;
    float: right;
    background: url("../img/right.png") no-repeat;
    background-position: 0px 0px;
    transition: 1s;
}
.daohang .top a:hover{/*设置侧边导航的最上面那个框*/
    background-position: -72px 0px;
}


.daohang .main a{/*设置侧边导航的中间那个框*/
     width: 72px;
     height: 72px;
     display: block;
     float: right;
     background: url("../img/right.png") no-repeat;
     background-position: 0px -72px;
     transition: 1s;
 }
.daohang .main a:hover{/*设置侧边导航的中间那个框*/
    background-position: -72px -72px;
}

.daohang .bottom a{/*设置侧边导航的底下【即倒数第二个】那个框*/
    width: 72px;
    height: 72px;
    display: block;
    float: right;
    background: url("../img/right.png") no-repeat;
    background-position: 0px -144px;
    transition: 1s;
}
.daohang .bottom .a1:hover{/*设置侧边导航的底下【即倒数第二个】那个框*/
    background-position: -72px -144px;
}



.bottom .cebian .celogo{/*设置侧边弹出的二维码 宽度为0 保证鼠标不指向它的时候不显示*/
    display: block;
    width: 0px;
    height: 140px;
    background: url("../img/侧边导航弹出的二维码.png");
    transition: width 1s;
    position: fixed;
    right: 72px;
    bottom: 130px;
}

.bottom:hover .celogo{/*设置侧边弹出的二维码 宽度为140 保证鼠标指向它的时候显示*/
    display: block;
    width: 140px;
    height: 140px;
    background: url("../img/侧边导航弹出的二维码.png");
    position: fixed;
    right: 72px;
    bottom: 130px;
    transition: width 1s;
}

.bottom:hover .a1{/*使得鼠标移到【手机站】或者【弹出的二维码】的时候 【手机站位置】仍然保持【蓝色】*/
    background-position: -72px -144px;

}

.daohang .bottom2 a{/*设置侧边导航的最底下那个框*/
    width: 72px;
    height: 44px;
    display: block;
    float: right;
    background: url("../img/right.png") no-repeat;
    background-position: 0px -213px;
/*    position: fixed;
    bottom: 80px;*/
    transition: 1s;
}
.daohang .bottom2 a:hover{/*设置侧边导航的最底下那个框*/

    background: url("../img/right.png") no-repeat;
    background-position: -72px -213px;
}

@media  screen and (max-width: 600px) {
    .head_top,.head_bottom{
        display: none;
    }
    .body_img img{/*设置【拖拉机图片】*/
        width: 100%;
        height: 300px;
        overflow: hidden;
        /*float: left;*/
    }/*设置【拖拉机图片】*/
    
    .wrap_top{
        display: none;
    }
    .wrap_bottom{
        width: 420px;
        height: 80px;
        margin-left: auto;
        margin-right: auto;
        /*background-color: red;*/
    }
    .wrap_bottom .left{/*设置【QQ】等图标的外边框*/
        width:300px;
        height:100px;
        /* background-color: yellow;*/
        float: left;
    }
    .wrap_bottom .left p{/*设置【分享】两个字*/
        display:block;
        float: left;
        padding-top: 25px;
        padding-right: 20px;
        padding-left: 35px;
    }
    .wrap_bottom .left img{/*设置【QQ】等图标位置*/
        padding-top: 25px;
        padding-left: 15px;
    }

    .wrap_bottom .main{/*设置【有限公司】部分的边框div*/
        width: 400px;
        height: 100px;
        /* background-color: deeppink;*/
        float: left;
        margin-left: 50px;
    }
    .wrap_bottom .main .p1{/*设置【有限公司】部分的内容*/
        padding-top: 20px;
    }
    .wrap_bottom .main p{
        padding-left: 30px;
    }
    .wrap_bottom .main span{
        font-weight: bold;
    }
    .wrap_bottom .right{/*设置最右下角【法律声明那部分的内容】*/
        width: 285px;
        height: 60px;
        background-color:#D5D5D5;
        float: left;
        margin-left: 164px;
    }
    .wrap_bottom .right a{
        padding-left: 5px;
        padding-right: 10px;
        line-height: 60px;
        border-right: 1px solid #B6AEB6;
        color: black;
    }
    .wrap_bottom .right a:hover{
        text-decoration: underline;
        color: black;
    }
}
